<template>
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="模块名" class="model">
            <el-input class="el-inputmode" readonly v-model="getModelId.assemblyName"></el-input>
        </el-form-item>
        <el-form-item label="零部件名称：" prop="workpieceName">
            <el-input v-model="form.workpieceName"></el-input>
        </el-form-item>
        <el-form-item label="规格型号：" prop="workpieceNo">
            <el-input v-model="form.workpieceNo"></el-input>
        </el-form-item>
        <el-form-item label="图片名称：" prop="workpieceImage">
            <el-input v-model="form.workpieceImage"></el-input>
        </el-form-item>
        <el-form-item label="寿命（H）：" prop="maintainDuration" :rules="[
            { type: 'number', message: '必须为数字值' },
            { pattern: /^[1-9]\d*$/, message: '不能为0' }

        ]">
            <el-input v-model.number="form.maintainDuration"></el-input>
        </el-form-item>
        <el-form-item label="是否根据运行时间倒计时：" prop="maintainType" :rules="[
            { type: 'number', message: '按运行时间0,按正常时1' }
        ]">
            <el-input v-model.number="form.maintainType"></el-input>
        </el-form-item>
        <el-form-item label="提醒保养时间百分比：" prop="remindPct" :rules="[
            { type: 'number', message: '必须为数字值' }
        ]">
            <el-input v-model.number="form.remindPct"></el-input>
        </el-form-item>
        <el-form-item label="提醒保养提示信息：" prop="remindMessage">
            <el-input v-model="form.remindMessage"></el-input>
        </el-form-item>
        <el-form-item label="警告保养时间百分比：" prop="warningPct" :rules="[
            { type: 'number', message: '必须为数字值' }
        ]">
            <el-input v-model.number="form.warningPct"></el-input>
        </el-form-item>
        <el-form-item label="警告保养提示信息：" prop="warningMessage">
            <el-input v-model="form.warningMessage"></el-input>
        </el-form-item>
        <el-form-item label="保养步骤文件地址：" prop="maintainStepUrl">
            <el-input v-model="form.maintainStepUrl"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit('form')">保存</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import { addListApi, modiFyListApi } from '@/api/SettingsApi/index.js'
export default {
    props: ['editList', 'getModelId'],
    watch: {
        editList: {
            handler: function (lisTenValue) {
                if (lisTenValue.workpieceId) {
                    this.form.workpieceName = lisTenValue.workpieceName;
                    this.form.workpieceNo = lisTenValue.workpieceNo;
                    this.form.workpieceImage = lisTenValue.workpieceImage;
                    this.form.maintainDuration = lisTenValue.maintainDuration;
                    this.form.maintainType = Number(lisTenValue.maintainType);
                    this.form.remindPct = lisTenValue.remindPct;
                    this.form.remindMessage = lisTenValue.remindMessage;
                    this.form.warningPct = lisTenValue.warningPct;
                    this.form.warningMessage = lisTenValue.warningMessage;
                    this.form.maintainStepUrl = lisTenValue.maintainStepUrl;
                    this.form.workpieceId = lisTenValue.workpieceId;
                } else {
                    this.form.workpieceName = "";
                    this.form.workpieceNo = "";
                    this.form.workpieceImage = "";
                    this.form.maintainDuration = "";
                    this.form.maintainType = "";
                    this.form.remindPct = "";
                    this.form.remindMessage = "";
                    this.form.warningPct = "";
                    this.form.warningMessage = "";
                    this.form.maintainStepUrl = "";
                    this.form.workpieceId = "";

                }

            },
            immediate: true,

        }
    },
    data() {
        return {
            rules: {
                workpieceName: { required: true, message: "请输入名称", trigger: 'blur' },
                workpieceNo: { required: true, message: "请输入型号", trigger: 'blur' },
                workpieceImage: { required: true, message: "请选择图片", trigger: 'blur' },
                maintainDuration: [
                    { required: true, message: "请输入", trigger: 'blur' },

                ],
                maintainType: { required: true, message: "请输入", trigger: 'blur' },
                remindPct: { required: true, message: "请输入", trigger: 'blur' },
                remindMessage: { required: true, message: "请输入时间", trigger: 'blur' },
                warningPct: { required: true, message: "请输入", trigger: 'blur' },
                warningMessage: { required: true, message: "请输入提示", trigger: 'blur' },
                maintainStepUrl: { required: true, message: "请输入地址", trigger: 'blur' },
            },
            form: {
                workpieceName: '',
                workpieceNo: '',
                workpieceImage: '',
                maintainDuration: '',
                maintainType: 0,
                remindPct: "",
                remindMessage: "",
                warningPct: "",
                warningMessage: "",
                maintainStepUrl: "",

            }
        }
    },
    methods: {
        onSubmit(formName) {

            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.editList.workpieceId) {
                        modiFyListApi({
                            assemblyId: this.$store.state.Tableindex.modelval.assemblyId,
                            workpieceId: this.editList.workpieceId,
                            workpieceName: this.form.workpieceName,
                            workpieceNo: this.form.workpieceNo,
                            workpieceImage: this.form.workpieceImage,
                            maintainDuration: this.form.maintainDuration,
                            maintainType: this.form.maintainType,
                            remindPct: this.form.remindPct,
                            remindMessage: this.form.remindMessage,
                            warningPct: this.form.warningPct,
                            warningMessage: this.form.warningMessage,
                            maintainStepUrl: this.form.maintainStepUrl,
                        }).then(res => {

                            if (res.code !== 200) {
                                this.$emit("errorFun", res)
                            }
                        })
                    } else {
                        addListApi({
                            assemblyId: this.$store.state.Tableindex.modelval.assemblyId,
                            workpieceName: this.form.workpieceName,
                            workpieceNo: this.form.workpieceNo,
                            workpieceImage: this.form.workpieceImage,
                            maintainDuration: this.form.maintainDuration,
                            maintainType: this.form.maintainType,
                            remindPct: this.form.remindPct,
                            remindMessage: this.form.remindMessage,
                            warningPct: this.form.warningPct,
                            warningMessage: this.form.warningMessage,
                            maintainStepUrl: this.form.maintainStepUrl,
                        }).then(res => {
                            if (res.code !== 200) {
                                this.$emit("errorFun", res)
                            }
                        })
                    }
                    this.$emit("child_edit_fun")
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    },

}
</script>
<style lang="less" scoped> .el-form {
     background: #04163bFF;
     z-index: 10000;
     height: 100%;
 }

 .el-form /deep/ .model {
     display: flex;
     flex-direction: row;
     height: 40px !important;
 }



 .el-inputmode {
     margin-left: 0px !important;

     /deep/ input {
         background: none !important;
     }
 }

 .el-form .model /deep/ .el-form-item__label {
     width: 80px !important;

 }


 .el-form-item {
     margin-bottom: 0px;
     height: 73px;
 }

 .el-form-item {
     display: flex;
     flex-direction: column;
 }

 .el-input {
     width: 86%;
     margin-left: 31px;

 }

 .is-error {
     .el-form-item__content {}
 }

 .el-input /deep/ .el-input__inner {

     background-color: #030c20;
     color: white;
     opacity: 1;
     height: 30px;
     border: 0px solid #5B9FC3;
     border-radius: 0px;
 }


 .el-form-item {
     /deep/ .el-form-item__content {
         margin-left: 0px !important;



     }
 }

 /deep/ .el-form-item__error {
     text-align: right;
     left: 30px !important;
     top: 34px;
 }

 .el-form-item /deep/ .el-form-item__label {
     width: 50% !important;
     text-align: left;
     color: white;
     margin-left: 31px;
     height: 30px !important;
 }

 .el-button--primary {
     width: 136px;
     height: 30px;
     line-height: 4px;
     margin: 10px 35%;
     background: #00184B;
     border: 1px solid #113D71;
     background: none;
     color: white;
     border-radius: 0px;
     background: #00184B;
     cursor: pointer;
 }
</style>